<template>
  <view class="">
    <!-- <uni-card>
      <view class="linkman">
        相关联系人
        <text @click="showAll">显示全部</text>
      </view>
      <view class="photo" v-for="(item,idnex) in contactInformation" :key="item.id">
        <view class="photo-image">
          <image :src="item.image" mode=""></image>
          <view class="photo-left">
            <view class="photo-name">
              {{item.photoName}}
            </view>
            <view class="photo-admin">
              {{item.photoAdmin}}
            </view>
          </view>
        </view>
        <view class="photo-icon">
          <image :src="item.photoIcon" mode=""></image>
        </view>
      </view>
    </uni-card> -->

    <!-- 使用信息 -->
    <uni-card>
      <uni-collapse>
        <uni-collapse-item title="使用信息" style="font-weight: bold; ">
          <view>
            <view class="registration" style="padding: 30rpx;">
              注册码
              <text>{{ elevatorInfo.registeredCode }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              识别码
              <text>{{ elevatorInfo.identifyCode }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              年检日期
              <text>{{ elevatorInfo.annualDate }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              使用单位
              <text>{{ elevatorInfo.useUnit }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              电梯管理员
              <text>{{ elevatorInfo.elevatorAdministrator }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              维保单位
              <text>{{ elevatorInfo.maintenanceUnit }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              维保工程师
              <text>{{ elevatorInfo.maintenanceEngineer }}</text>
            </view>
            <view class="registration" style="padding: 30rpx;">
              入网日期
              <text>{{ elevatorInfo.networkDate }}</text>
            </view>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </uni-card>

    <!-- 出厂信息 -->
    <uni-card>
      <uni-collapse>
        <uni-collapse-item title="出厂信息" style="font-weight: bold;">
          <view class="registration" style="padding: 30rpx;">
            电梯品牌
            <DictTag :dict-value="getDict(DictEnum.IOT_ELEVATOR_BRAND)" :value="elevatorInfo.elevatorBrand"></DictTag>
          </view>
          <view class="registration" style="padding: 30rpx;">
            型号
            <text>{{ elevatorInfo.modelNumber }}</text>
          </view>
          <view class="registration" style="padding: 30rpx;">
            生产日期
            <text>{{ elevatorInfo.productionDate }}</text>
          </view>
          <view class="registration" style="padding: 30rpx;">
            安装日期
            <text>{{ elevatorInfo.installationDate }}</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </uni-card>
    <!-- 规格参数 -->
    <uni-card>
      <uni-collapse>
        <uni-collapse-item title="规格参数" style="font-weight: bold;">
          <view class="registration" style="padding: 30rpx;">
            电梯类型
            <DictTag :dict-value="getDict(DictEnum.IOT_ELEVATOR_TYPE)" :value="elevatorInfo.elevatorType"></DictTag>
          </view>
          <view class="registration" style="padding: 30rpx;">
            使用场景
            <text>{{ elevatorInfo.useType }}</text>
          </view>
          <view class="registration" style="padding: 30rpx;">
            额定载重
            <text>{{ elevatorInfo.ratedLoad }}</text>
          </view>
          <view class="registration" style="padding: 30rpx;">
            额定速度
            <text>{{ elevatorInfo.nominal }}</text>
          </view>
          <view class="registration" style="padding: 30rpx;">
            井道高度
            <text>{{ elevatorInfo.shaftHeight }}</text>
          </view>
          <view class="registration" style="padding: 30rpx;">
            层站
            <text>{{ elevatorInfo.layerNum }}</text>
          </view>
        </uni-collapse-item>
      </uni-collapse>
    </uni-card>

    <!-- 底部 -->
    <uni-card>
      <view class="footer">
        <view class="footer-div" @click="changeUrl(item.url,elevatorId);"
              v-for="(item,index) in record"
              :key="index" :index="index">
          <view class="footer-image">
            <image :src="item.recordIcon" mode=""></image>
            <view class="footer-recordName">
              {{ item.recordName }}
            </view>
          </view>

        </view>
      </view>
    </uni-card>
  </view>
</template>
<script>
import UniCard from "@/uni_modules/uni-card/components/uni-card/uni-card.vue";
import {DictEnum} from "@/enums/dictEnum";
import {getDict} from "@/utils/dict";

export default {
  computed: {
    DictEnum() {
      return DictEnum
    }
  },
  components: {UniCard},
  props: {
    elevatorInfo: {
      type: Object,
      required: true
    },
    elevatorId: {
      type: [String, Number], // Allow either String or Number
      required: true
    }
  },
  data() {
    return {
      record: [{
        id: 0,
        recordIcon: "/static/image/detailsMsg/tiring.png",
        recordName: "困人记录",
        url: "/pages/tabbar/polling/tiringRecord/tiringRecord"

      },
        {
          id: 1,
          recordIcon: "/static/image/detailsMsg/maintain.png",
          recordName: "保养记录",
          url: "/pages/gird/maintenance/record"
        },
        {
          id: 2,
          recordIcon: "/static/image/detailsMsg/service.png",
          recordName: "维修记录",
          url: "/pages/gird/record/record",
        }
      ],
      elevatorBrand: []
    }
  },
  methods: {
    getDict,
    changeUrl(url, elevatorId) {
      uni.navigateTo({
        url: url + `?elevatorId=` + elevatorId
      })
    }
  },

}
</script>
<style scoped>

.uni-card {
  width: 670rpx;
  /* height: 820rpx; */
  background: #FFFFFF;
  box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
  border-radius: 16rpx;
  margin: 0 auto;
  border: none;
  margin-bottom: 30rpx;
}

/* 注册码 */
.registration {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;
  padding: 30rpx;
}

.registration text {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #34363D;
}

.registration text:nth-child(4) {
  color: #017EFE;
}

.footer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* display: inline-block; */
  /* justify-content: center; */


}

.footer-div {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-align: center;

  height: 200rpx;
  background: #FFFFFF;

  border-radius: 16rpx;

}

.footer-image {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  border-right: 1px solid #E2E6EF;
}

.footer-image:nth-child(2) {
  border-right: none;
}

.footer-image image {
  width: 40rpx;
  height: 40rpx;

}

.footer-recordName {

  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #989BA6;

}
</style>
